<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/res/commons/taglib.jsp" %>
<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>APP商品广告推送管理系统</title>
	<link rel="stylesheet" type="text/css" href="${path}/res/css/login.css">
</head>

<body>
	<div id="wrapper" class="login-page">
		<div id="login_form" class="form">
			<form class="register-form">
				<p id="regprompt" style="color:red;display:none"></p>
				<input type="text" placeholder="用户名"  id="reguserName" />
				<input type="password" placeholder="密码" id="regpassWord" />
				<input type="text" placeholder="手机号码" id="regmobile" />
				<button id="create">创建账户</button>
				<p class="message">已经有了一个账户?
					<a href="#">立刻登录</a>
				</p>
			</form>
			<form class="login-form">
			 	<h2>APP商品广告推送管理系统</h2>
				<p id="logprompt" style="color:red;display:none"></p>
				<input type="text" placeholder="用户名" id="userName" />
				<input type="password" placeholder="密码" id="passWord" />
				<button id="login">登　录</button>
				<p class="message">还没有账户? <a href="#">立刻创建</a></p>
			</form>
		</div>
	</div>

<script src="${path}/res/js/jquery-3.4.1.js"></script>
<script type="text/javascript">

	$(function(){
		$("#create").click(function(){
			check_register();
			return false;
		})
		$("#login").click(function(){
			check_login();
			return false;
		})
		$('.message a').click(function () {
		    $('form').animate({
		        height: 'toggle',
		        opacity: 'toggle'
		    }, 'slow');
		});
	})

	function check_login(){
		var name=$("#userName").val();
		var pass=$("#passWord").val();
		if(name.length==0){
			$("#logprompt").text("请输入用户名");
			registError('log');
		 	return;
		}
		if(pass.length==0){
			$("#logprompt").text("请输入密码");
			registError('log');
			return;
		}
		$.ajax({
			url:"${path}/login/logindealwith.jhtml",
		  	dataType:"json", 
		  	async:true,
		  	data:{
		  		"userName":name,
		  		"passWord":pass
		  		},
		  	type:"post",
			success:function(date){
				var JSDate = JSON.parse(date);
				if(JSDate.code == 'error'){
					alert(JSDate.message);
				}
				if(JSDate.code == 'regist'){
					alert(JSDate.message);
					$("#userName").val("");
				 	$("#passWord").val("");
					$('form').animate({
				        height: 'toggle',
				        opacity: 'toggle'
				    }, 'slow');
				}
				if(JSDate.code == 'success'){
					alert(JSDate.message);
				}
			},
			error:function(){
			    alert("服务器异常，请稍后再试");
			}
		});
	}


	function check_register(){
		var name = $("#reguserName").val();
		var pass = $("#regpassWord").val();
		var mobile = $("#regmobile").val();
		var pattern = /^1[34578]\d{9}$/;
		if(name.length==0){
			$("#regprompt").text("请填写用户名");
			registError();
		}else if(pass.length==0){
			$("#regprompt").text("请填写密码");
			registError();
		}else if(mobile.length==0){
			$("#regprompt").text("请填写手机号码");
			registError();
		}else if(!pattern.test(mobile)){
			$("#regprompt").text("请填写正确的手机号码");
			registError();
		}else{
			$("#regprompt").css("display","none"); 
			$.ajax({
				url:"${path}/login/registered.jhtml",
			  	dataType:"json", 
			  	async:true,
			  	data:{
			  		"userName":name,
			  		"passWord":pass,
			  		"mobile":mobile
			  		},
			  	type:"post",
				success:function(date){
					var JSDate = JSON.parse(date);
					if(JSDate.code == 'error'){
						$("#regprompt").text(JSDate.message);
						registError();
					}else if(JSDate.code == 'success'){
						alert(JSDate.message);
						setTimeout(function(){
							window.location.href = "${path}/index/indexpage.jhtml";
						},1000);
					}
				},
				error:function(){
				    alert("服务器异常，请稍后再试");
				}
			});
		 }
	}
	function registError(type){
		if(type=='log'){
			$("#logprompt").css("display","block"); 
		}else{
			$("#regprompt").css("display","block"); 
		}
		$("#login_form").removeClass('shake_effect');  
		setTimeout(function(){
			$("#login_form").addClass('shake_effect')
		},1);
	}
</script>
</body>
</html>